<template>
    <div>
        <el-menu mode="horizontal" background-color="transparent" text-color="#800080" active-text-color="#000000"
            class="el-menu-vertical-demo">
            <!-- 这是menuData没有子菜单的 -->
            <el-menu-item v-for="item in menuDataNoChildren" @click="goMenu(item)" :key="item.name"
                :disabled="item.disabled" :index="item.path">
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
            <!-- 这是menuData有子菜单的 -->
            <el-submenu v-for="item in menuDataHasChildren" :key="item.label" :disabled="item.disabled" :index="item.label">
                <template slot="title">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.label">
                    <el-menu-item @click="goMenu(subItem)" :index="subItem.path">{{ subItem.label
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <!-- 这是websiteData没有子菜单的 -->
            <el-menu-item v-for="item in websiteDataNoChildren" @click="goWebsite(item)" :key="item.name"
                :disabled="item.disabled" :index="item.path">
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
            <!-- 这是websiteData有子菜单的 -->
            <el-submenu v-for="item in websiteDataHasChildren" :key="item.label" :disabled="item.disabled"
                :index="item.label">
                <template slot="title">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.label">
                    <el-menu-item @click="goWebsite(subItem)" :index="subItem.path">{{ subItem.label
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="logout" @click="logout" key="logout">
                <i class="el-icon-close"></i>
                <span slot="title">安全退出</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
export default ({
    name: 'CommonHeader',
    data() {
        return {
            menuData: [
                {
                    path: '/',
                    name: 'home',
                    label: '首页',
                    icon: 's-home',
                    url: 'Home/Home',
                    disabled: false
                },
                {
                    path: '/fanju',
                    name: 'fanju',
                    label: '番剧',
                    icon: 'monitor',
                    url: 'Fanju/Fanju',
                    disabled: false
                },
            ],
            websiteData: [
                {
                    label: '我的音乐',
                    icon: 'menu',
                    disabled: false,
                    children: [
                        {
                            path: 'https://y.qq.com/',
                            name: 'qqMusic',
                            label: 'QQ音乐',
                        },
                        {
                            path: 'https://www.kugou.com/',
                            name: 'kuGou',
                            label: '酷狗音乐',
                        },
                        {
                            path: 'https://music.163.com/',
                            name: 'netEaseCloud',
                            label: '网易云',
                        }
                    ]
                },
                {
                    path: 'https://www.csdn.net/',
                    name: 'csdn',
                    label: '我的博客',
                    icon: 'suitcase',
                    disabled: false
                },
                {
                    path: 'https://www.bilibili.com/',
                    name: 'bilibili',
                    label: 'B站',
                    icon: 'goblet-full',
                    disabled: false
                },
            ]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        goMenu(item) {
            //路由方法
            this.$router.push(item.path, () => { }, () => { })
            console.log(item.label);
        },
        goWebsite(item) {
            // location.href=item.path
            window.open(item.path, '_blank')
        },
        logout(){
            localStorage.removeItem("userToken")
            this.$router.push("/login", () => { }, () => { })
        }
    },
    computed: {
        //menuData里的数据应该是从 后端接口中获取。
        //有子菜单
        menuDataHasChildren() {
            return this.menuData.filter(item => item.children)
        },
        //无子菜单
        menuDataNoChildren() {
            return this.menuData.filter(item => !item.children)
        },
        websiteDataHasChildren() {
            return this.websiteData.filter(item => item.children)
        },
        //无子菜单
        websiteDataNoChildren() {
            return this.websiteData.filter(item => !item.children)
        },
        isCollapse() {
            return this.$store.state.isCollapse
        }
    }
})
</script>
<style scoped></style>